<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>入库列表--layui后台管理模板 2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../../css/public.css" media="all" />
</head>

<body class="childrenBody">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form">


            <div class="layui-input-inline">
                <input id="sheetCode" placeholder="输入配货单号" autocomplete="off" class="layui-input">
            </div>

            <div class="layui-input-inline">
                <select class="warehouse_id" name="warehouse_id">
                </select>
            </div>

            <div class="layui-input-inline">
                <select class="material_id" name="material_id">
                </select>
            </div>

            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="dateRange" placeholder="选择时间范围">
            </div>

            <div class="layui-input-inline">
                <a class="layui-btn search_btn" data-type="reload"><i class="layui-icon">&#xe615;</i>搜索</a>
            </div>
            <div class="layui-inline">
                <a class="layui-btn layui-btn-normal exportAll_btn"><i class="layui-icon">&#xe601;</i>批量导出</a>
            </div>
        </form>
    </blockquote>

    <table id="inboundList" lay-filter="inboundList"></table>

    <script type="text/html" id="inboundListBar">
		<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail"><i class="layui-icon">&#xe634;</i>预览</a>
    </script>

    <script type="text/javascript" src="../../layui/layui.js"></script>
    <script type="text/javascript" src="../../js/common.js"></script>
    <script>
        layui.use(['form', 'layer', 'laydate', 'table', 'laytpl'], function () {
            var form = layui.form,
                layer = parent.layer === undefined ? layui.layer : top.layer,
                $ = layui.jquery,
                laydate = layui.laydate,
                laytpl = layui.laytpl,
                table = layui.table;

            //参数赋值
            $(document).ready(function () {
                var sheetCode = getQueryString("sheetCode");
                $('#sheetCode').attr("value", sheetCode);
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#dateRange' //指定元素
                , range: true
            });

            var employeeList = eval('(' + window.localStorage.getItem("employeeList") + ')');
            var warehouseList = eval('(' + window.localStorage.getItem("warehouseList") + ')');
            var materialList = eval('(' + window.localStorage.getItem("materialList") + ')');
            $(".warehouse_id").append(renderSelectOptions(warehouseList, { valueField: "id", textField: "name", selectedValue: null }, "仓库"));
            $(".material_id").append(renderSelectOptions(materialList, { valueField: "id", textField: "name", selectedValue: null }, "耗材"));
            form.render('select');

            //入库列表
            var tableIns = table.render({
                elem: '#inboundList'
                , url: contextPath + '/sys/flowDetail/queryInboundList' //数据接口
                , id: 'inboundListTable'
                , page: true //开启分页
                , height: "full-125"
                , limit: 15
                , limits: [15, 30]
                , even: true
                , method: 'POST'   //laui 修改请求方式
                , cellMinWidth: 95
                , request: {
                    pageName: 'page' //页码的参数名称，默认：page
                    , limitName: 'limit' //每页数据量的参数名，默认：limit
                }
                , response: {
                    statusName: 'code' //数据状态的字段名称，默认：codes
                    , statusCode: '0' //状态字段成功值
                    , msgName: 'msg' //消息字段
                    , countName: 'count' //数据总数的字段名称，默认：count
                    , dataName: 'data' //默数据列表的字段名称，认：data        //我返回的datas集合 
                }
                , cols: [[ //表头
                    { type: 'checkbox', fixed: 'left', align: "center" }
                    , { field: 'id', title: 'ID', align: "center" } //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    , { field: 'sheetCode', title: '配货单号', width: 150, align: "center" }
                    , {
                        field: 'warehouseId', title: '仓库名称', align: "center", templet: function (d) {
                            return renderItemName(warehouseList, d.warehouseId);
                        }
                    }
                    , {
                        field: 'materialId', title: '耗材名称', width: 200, templet: function (d) {
                            return renderItemName(materialList, d.materialId);
                        }
                    }
                    , { field: 'rfid', title: 'RFID', align: "center", width: 250 }
                    , {
                        field: 'employeeHandlerId', title: '入库员', align: "center", templet: function (d) {
                            var name = renderItemName(employeeList, d.employeeHandlerId);
                            return '<a lay-href="employeeList.html?name=' + name + '">' + name + '</a>';
                        }
                    }
                    , {
                        field: 'employeeAssessorId', title: '检查员', align: "center", templet: function (d) {
                            return '<a class="layui-table-link " href="javascript:;">' + renderItemName(employeeList, d.employeeAssessorId) + '</a>';
                        }
                    }
                    , { field: 'createTime', title: '入库时间', sort: true, width: 200, align: "center" }
                    , { title: '操作', templet: '#inboundListBar', width: 100, fixed: "right", align: "center" }
                ]]
            });

            //搜索
            $(".search_btn").on("click", function () {

                //执行重载
                table.reload('inboundListTable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        sheet_code: $('#sheetCode').val()
                        , warehouse_id: $('.warehouse_id').val()
                        , material_id: $('.material_id').val()
                        , dateRange: $('#dateRange').val()
                    }
                });
            });

            //监听工具条
            table.on('tool(inboundList)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                switch (obj.event) {
                    case 'detail':
                        var photos = [];
                        var photoArray = data.photoPath.split(",");
                        for (var i = 0; i < photoArray.length; i++) {
                            var newPhoto = { "src": contextPath + "/sys/flowDetail/image?filePath=" + photoArray[i] };
                            photos.push(newPhoto);
                        }

                        parent.showImg("入库图片预览", photos);
                        break;

                }
            });
        });

    </script>
</body>

</html>